<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {onBeforeMount, onBeforeUnmount, ref, shallowRef} from "vue";
import ArticleSettings from "@/pages/admin/article/articleSettings.vue";
import {ElMessage} from "element-plus";
import VIcon from "@/components/icon/VIcon.vue";
import {useRouter} from "vue-router";
import {getArticleDetail, saveArticle} from "@/api/article.js";

const $router = useRouter();

const articleInfo = ref({
  title: '',
  content: '',
});

// 查询文章详情
const findArticleList = async () => {
  const {id} = $router.currentRoute.value.query;
  if (!id) {
    return;
  }
  loading.value = true;
  await getArticleDetail(id).then(res => {
    articleInfo.value = res.data;
    const timer = setTimeout(() => {
      loading.value = false;
      clearTimeout(timer);
    }, 500);
  }).catch((err) => {
    console.log(err);
  });
};

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const toolbarConfig = {};
const editorConfig = {placeholder: '请输入内容...'};

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
};
onBeforeMount(async () => {
  console.log('list mounted')
  await findArticleList();
});
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  console.log('销毁了write.vue组件')
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
});

const loading = ref(false);
const dialog = ref({
  visible: false
});
const publishArticle = async (status) => {
  if (!articleInfo.value.title) {
    ElMessage.warning('请输入文章标题');
    return;
  }
  if (!articleInfo.value.content) {
    ElMessage.warning('请输入文章内容');
    return;
  }
  if (status === 1) {
    dialog.value.visible = true;
    return;
  }
  const article = articleInfo.value;
  article.status = status;
  article.brief = article.title;
  loading.value = true;
  await saveArticle(article).then(async (res) => {
    console.log(res);
    // 重新获取文章详情
    await findArticleList();
    const timer = setTimeout(() => {
      loading.value = false;
      clearTimeout(timer);
    }, 500);
  }).catch(err => {
    console.log(err);
  });
};
const goBack = () => {
  $router.push({path: '/admin/article/list'});
};
</script>

<template>
  <div class="v-write-article">
    <div class="v-toolbar">
      <v-icon icon="Back" size="22" color="#606266" @click="goBack"/>
      <div>
        <el-button type="info" @click="publishArticle(0)">保存草稿</el-button>
        <el-button type="success" @click="publishArticle(1)">立即发布</el-button>
      </div>
    </div>
    <div v-loading="loading">
      <div class="v-title">
        <h3 class="v-article-header">文章标题</h3>
        <el-input v-model="articleInfo.title" placeholder="请输入标题内容" maxlength="100" show-word-limit/>
      </div>
      <div class="v-content">
        <h3 class="v-article-header">文章内容</h3>
        <div style="border: 1px solid #ccc">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                   mode="default"/>
          <Editor style="height: 450px; overflow-y: hidden;" v-model="articleInfo.content" :defaultConfig="editorConfig"
                  mode="default" @onCreated="handleCreated"/>
        </div>
      </div>
    </div>
    <div>&nbsp;</div>
  </div>
  
  <article-settings v-model="dialog.visible" :article-info="articleInfo"/>
</template>

<style scoped>
.v-write-article {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #F5F7FA;
  
  .v-toolbar {
    margin-bottom: 10px;
    background-color: #fff;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .v-article-header {
    margin-bottom: 8px;
  }
  
  .v-title {
    margin: 5px 0;
    width: 100%;
  }
}
</style>